<script setup>
import { defineProps,defineEmits } from 'vue'
import {Icon} from "@iconify/vue";

const emit = defineEmits(['switchUserEmail'])

const props = defineProps({
  icon: {
    type: String,
    default: ''
  },
  text: {
    type: String,
    default: ''
  },
  iconPosition:{
    type: String,
    default: 'left'
  },
  tag:{
    type: String,
    default: ''
  }
})

const handleMenuClick = (tag) => {
  emit('switchUserEmail',tag)
}

</script>

<template>
  <div class="flex-1 flex items-center justify-center transition">
    <div v-if="tag!=='switch-user'" class="rounded p-2 flex items-center justify-center transition"
    :class="[tag !== 'all' ? 'hover:bg-stone-100 cursor-pointer' : '']"
    >
      <Icon v-if="iconPosition == 'left' && icon!==''" :icon="icon" class="mr-1"></Icon>
      <span :class="[tag  == 'all' ? 'text-gray-500' : '']" >{{ text }}</span>
      <Icon v-if="iconPosition == 'right' && icon!==''" :icon="icon" class="ml-1"></Icon>
    </div>
    <div  v-else class="rounded cursor-pointer p-2 flex items-center justify-center transition hover:bg-stone-100">
      <a-dropdown placement="bottomLeft" :overlayStyle="{ marginTop: 34 }">
        <a class="flex ant-dropdown-link" @click.prevent>
          <Icon v-if="iconPosition == 'left'" :icon="icon" class="mr-1"></Icon>
          {{ text }}
        </a>
        <template class="mt-2" #overlay>
          <a-menu
          >
            <a-menu-item @click="handleMenuClick('qq')">
              <a href="javascript:;">QQ邮箱</a>
            </a-menu-item>
            <a-menu-item @click="handleMenuClick('163')">
              <a href="javascript:;">163邮箱</a>
            </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
    </div>
  </div>
</template>

<style scoped lang="less">
:deep(.ant-dropdown-menu) {
  margin-top: 34px !important;
  left: 192px !important;
}
.ant-dropdown-link {
  color: black;
}
</style>